import React, { useEffect, useState, useCallback } from 'react';
import {
  Card,
  Grid,
  Space,
  Button,
  Typography,
  Message,
  Spin,
} from '@arco-design/web-react';
import styles from './style/index.module.less';
import { getWalletDetail } from '@/api/wallet.js';
import PayModal from '@/pages/telepathy/educationTelepathy/recharge/payModal';
import {
  SendOrRecycleType,
  RechargeType,
  PayWayType,
} from '@/pages/telepathy/educationTelepathy/enum';
import SendOrRecycleModal from '@/pages/telepathy/educationTelepathy/sendOrRecycle/index';
import RechargeForm from '@/pages/telepathy/educationTelepathy/recharge/rechargeForm';
import BatchOperate from '@/pages/telepathy/educationTelepathy/batchOperate';
import PubSub from 'pubsub-js';

const { Row, Col } = Grid;
const gutter = 16;

function Wallet() {
  useEffect(() => {
    const telepathyChangeSub = PubSub.subscribe(
      'TelepathyChangeMessage',
      (msg: string, data: any) => {
        setTelepathyBalance(data.Balance);
      }
    );
    return () => {
      PubSub.unsubscribe(telepathyChangeSub);
    };
  }, []);

  const [telepathyBalance, setTelepathyBalance] = useState();
  const [loading, setLoading] = useState(false);

  const getWalletData = useCallback(async () => {
    setLoading(true);
    const res: any = await getWalletDetail({});
    if (res?.StatusCode === 200) {
      setTelepathyBalance(res.Result.TelepathyBalance);
    } else {
      Message.error('获取信息失败');
    }
    setLoading(false);
  }, []);

  useEffect(() => {
    getWalletData();
  }, []);

  /**
   * 充值
   */
  const [payAmount, setPayAmount] = useState(0);
  const [rechargeTitle, setRechargeTitle] = useState('');
  const [rechargeFormVisible, setRechargeFormVisible] = useState(false);
  const [rechargeType, setRechargeType] = useState(RechargeType.RechargeWallet);
  const [payWay, setPayWay] = useState(PayWayType.aliPay);

  const handleRechargeVisible = (visible: boolean) => {
    setRechargeFormVisible(visible);
  };

  const toRecharge = (type: RechargeType) => {
    handleRechargeVisible(true);
    setRechargeType(type);
    if (type === RechargeType.RechargeWallet) {
      setRechargeTitle('充值钱包');
    } else if (type === RechargeType.RechargeInpiration) {
      setRechargeTitle('充值算力值');
    }
  };

  const confirmRecharge = (value) => {
    setPayAmount(value.rechargeValue);
    setPayWay(value.payWay);
    setPayModalVisible(true);
  };

  const [payFormVisible, setPayModalVisible] = useState(false);

  const handlePayFormVisible = () => {
    setPayModalVisible(false);
  };

  const confirmPayForm = () => {};

  /**
   * 下发/回收
   */

  const [sendOrRecycle, setSendOrRecycle] = useState(0);
  const [sendOrRecycleVisible, setSendOrRecycleVisible] = useState(false);
  const handleSendOrRecycleVisible = (visible: boolean) => {
    setSendOrRecycleVisible(visible);
  };

  const handleSendOrRecycle = (type: SendOrRecycleType) => () => {
    setSendOrRecycle(type);
    setSendOrRecycleVisible(true);
  };

  // 批量下发
  const [batchOperateVisible, setBatchOperateVisible] = useState(false);
  const changeBatchOperateVisible = (visible: boolean) => {
    setBatchOperateVisible(visible);
  };

  return (
    <div>
      <Card className={styles.box}>
        <Space size="large">
          <Button
            onClick={handleSendOrRecycle(SendOrRecycleType.SendInspiration)}
          >
            下发算力值
          </Button>
          <Button
            onClick={handleSendOrRecycle(SendOrRecycleType.RecycleInspiration)}
          >
            回收算力值
          </Button>
          <Button
            onClick={() => {
              setBatchOperateVisible(true);
            }}
          >
            批量下发算力值
          </Button>
        </Space>
      </Card>

      <Row gutter={gutter}>
        <Col span={24}>
          <Spin loading={loading} style={{ width: '100%' }}>
            <Card className={styles.card} bodyStyle={{ textAlign: 'center' }}>
              <Typography.Title heading={5}>校园算力值</Typography.Title>
              <Typography.Title heading={2}>
                {telepathyBalance}
              </Typography.Title>
              <Button
                type="primary"
                onClick={() => toRecharge(RechargeType.RechargeInpiration)}
              >
                充值算力值
              </Button>
            </Card>
          </Spin>
        </Col>
      </Row>

      <RechargeForm
        title={rechargeTitle}
        visible={rechargeFormVisible}
        onConfirm={confirmRecharge}
        handleChangeVisible={handleRechargeVisible}
      ></RechargeForm>

      <PayModal
        title={rechargeTitle}
        visible={payFormVisible}
        payAmount={payAmount}
        rechargeType={rechargeType}
        payWay={payWay}
        onConfirm={confirmPayForm}
        handleChangeVisible={handlePayFormVisible}
      ></PayModal>

      <SendOrRecycleModal
        visible={sendOrRecycleVisible}
        handleChangeVisible={handleSendOrRecycleVisible}
        type={sendOrRecycle}
      ></SendOrRecycleModal>

      <BatchOperate
        visible={batchOperateVisible}
        modalTitle="批量下发算力值"
        changeVisible={changeBatchOperateVisible}
      ></BatchOperate>
    </div>
  );
}

export default Wallet;
